<template>
  <div class="view">
    <el-row class="row">
      <el-col :span="12">
        <h1 class="title">基于流媒体技术的课程点播系统</h1>
        <svg class="background-area">
          <circle r="80%" stroke-width="2" fill="#66b1ff" />
        </svg>
        <Picture class="left-picture"></Picture>
      </el-col>
      <el-col :span="12" class="form-box">
        <transition name="el-zoom-in-center" @after-leave="leaveLogin">
          <div v-show="showLogin" key="login">
            <el-button
              @click="clickShowBtn"
              type="primary"
              href="javascript:;"
              class="switch-btn"
              >立即注册</el-button
            >
            <div class="form-login-box">
              <LoginForm class="form-login"></LoginForm>
              <a href="javascript:;" @click="forgotPassword">忘记密码？</a>
            </div>
          </div>
        </transition>
        <transition name="el-zoom-in-center" @after-leave="leaveRegister">
          <div v-show="showRegister" key="register">
            <el-button
              @click="clickShowBtn"
              type="primary"
              href="javascript:;"
              class="switch-btn"
              >已有账号</el-button
            >
            <div class="form-register-box">
              <RegisterForm class="form-register"></RegisterForm>
            </div>
          </div>
        </transition>
      </el-col>
    </el-row>
    
    </div>
</template>

<script>
import LoginForm from "./components/loginForm.vue";
import RegisterForm from "./components/registerForm.vue";
import Picture from "./components/picture.vue";

export default {
  components: {
    LoginForm,
    RegisterForm,
    Picture,
  },
  data() {
    return {
      // 登录注册切换必须使用两个变量，表单用相对位置时，用一个变量表单会闪动
      showLogin: true,
      showRegister: false
    };
  },
  methods: {
    leaveRegister() {
      this.showLogin = true;
    },
    leaveLogin() {
      this.showRegister = true;
    },

    clickShowBtn() {
      if (this.showLogin) {
        this.showLogin = false;
      } else {
        this.showRegister = false;
      }
    },
    forgotPassword() {
      this.$router.push('/forgotPassword')
    }
  }
};
</script>

<style lang='scss' scoped>
$color-bg: #f5f7fa;
$color-bg-button: #409eff;
$color-text-button: #ffffff;

.row {
  height: 100vh;
  width: 100vw;
  background-color: #EDF3FF;

  .title {
    font-size: 2vw;
    position: absolute;
    z-index: 3;
    left: 1.5vw;
    top: 5vh;
    color: #409eff;
    text-shadow: #ffffff 0.05vw 0 0, #ffffff 0 0.05vw 0, #ffffff -0.05vw 0 0, #ffffff 0 -0.05vw 0;
  }

  .left-picture {
    width: 30vw;
    height: auto;
    margin-top: 30vh;
    position: absolute;
    left: 13vw;
    z-index: 2;
  }

  .background-area {
    width: 60vw;
    height: 100vh;
    position: absolute;
    left: 0;
    z-index: 1;
  }

  .form-box {
    width: 30vw;
    height: 70vh;
    position: relative;
    left: 60vw;
    top: 13vh;
    font-size: 0.8vw;

    .form-register-box {
      width: inherit;
      height: 100%;
      position: relative;
      padding: 2vw;
      background-color: $color-bg;
      border-radius: 30px;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);

      .form-register {
        width: 100%;
        height: 100%;
        background-color: $color-bg;
      }
    }

    .form-login-box {
      width: inherit;
      height: 100%;
      position: relative;
      padding: 2vw;
      background-color: $color-bg;
      border-radius: 30px;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);

      .form-login {
        width: 100%;
        height: 100%;
        background-color: $color-bg;
      }

      a {
        text-decoration: none;
      }
    }

    .switch-btn {
      position: relative;
      z-index: 1000;
      right: 0;
      float: right;
      border-radius: 0 30px 0 30px;
      height: 3rem;
      width: 6rem;
    }
  }
}
</style>